<template>
	<uni-popup ref="popupRef" type="center" @change="handleChange">
		<view class="popup-avatar">
			<view class="box-rules">
				<view class="rules-title flex justify-between items-center px-10">
					<view class="flex items-center">
						<ImageBoxVue src="/static/icons/title.png" width="35rpx" height="29rpx"></ImageBoxVue>
						<text class="text-sm ml-10">基本信息</text>
					</view>
				</view>
				<view class="rules-content">
					<view class="identity flex items-center mb-20">
						<view class="mr-20">{{relatList[user.relat]}}</view>
						<view class="edit" @click="handleEdit(user.id)">编辑</view>
					</view>
					<view class="birthday">{{`${dayjs(user.birthday).format('YYYY.MM.DD HH:mm')} [${user.timezone}区]`}}</view>
					<view class="birthday mb-20">壬午年正月二十</view>
					<view class="addr flex items-center mb-20">
						<view class="label mr-20">出生于</view>
						<view class="value">{{`${user.birthpro} ${user.birthcity}`}}</view>
					</view>
					<view class="addr flex items-center">
						<view class="label mr-20">现住于</view>
						<view class="value">{{`${user.respro} ${user.rescity}`}}</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		watch,
	} from 'vue';
	import config from '@/config/index.js'
	import dayjs from "dayjs"

	const props = defineProps({ // payType 支付类型 1、红钻 2、蓝钻
		modelValue: {
			type: Boolean,
			default: false
		},
		user: {
			type: Object,
		}
	})
	const emit = defineEmits(['update:modelValue'])

	const popupRef = ref(null)
	const relatList = config.relatList
	const freeShow = ref(false)

	watch(() => props.modelValue, () => {
		if (props.modelValue) {
			popupRef.value.open()
		} else {
			popupRef.value && popupRef.value.close()
		}
	}, {
		deep: true,
		immediate: true
	})

	const handleChange = (e) => {
		emit('update:modelValue', e.show)
	}
	const handleEdit = (id) => {
		uni.navigateTo({
			url: `/pages/views/archiveAdd${id ? `?id=${id}` : ''}`,
			success: () => {
				emit('update:modelValue', false)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.popup-avatar {
		width: 690rpx;
		margin: 0 30rpx;
		background: linear-gradient(180deg, #F2F8FF 0%, #D0EDFF 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 8rpx;

		.box-rules {
			width: 100%;
			// background: linear-gradient(180deg, #F2F8FF 0%, #D0EDFF 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid;
			border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;

			.rules-title {
				text {
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;

					>text {
						color: #CCCCCC;
					}

					&.desc {
						font-weight: 400;
						font-size: 26rpx;
						color: #47A8FF;
					}
				}
			}

			.rules-content {
				background: #EBF7FF;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				padding: 20rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #273A3F;
				line-height: 36rpx;
			}

			.identity {
				.edit {
					color: #fff;
					background: #0094FF;
					padding: 6rpx 16rpx;
					border-radius: 20rpx;
				}
			}

			.addr {
				.label {
					color: #aaa;
				}
			}
		}
	}
</style>